import React from 'react';
import { Col, Flex, Row, Typography, Tooltip } from 'antd';
import './index.scss';
import { useTranslation } from 'react-i18next';
import _ from 'lodash';

const { Title } = Typography;
const FileAnalysisContent = ({
  analysisContents = [],
}) => {
  const { t } = useTranslation();
  const str = Math.floor(Math.random() * (100 - 1 + 1)) + 1;
  // 展示列数
  const COLUMNS_NUM = 3;

  const analysisContentsData = analysisContents?.map(item => {
    const groupLen = item?.list?.length;
    const deletion = (Math.floor(groupLen / COLUMNS_NUM) + 1) * COLUMNS_NUM - groupLen;
    // 长度不够展示一行时补充
    const appendList = [...item.list || []];
    for (let i = 0; i < deletion; i++) {
      appendList.push({ key: '', value: '' });
    };
    return {
      ...item,
      // 按照列数分组遍历
      list: _.chunk(appendList, COLUMNS_NUM),
    }
  });

  return (
    <div className='analysis-info-wrap'>
      {
        analysisContentsData && analysisContentsData?.map((data, index) => (
          <div key={`analysisContents-${index}`}>
            <div className='info-tit'>{t(`bigSimulationFile.${data?.moduleName}`)}</div>
            <Flex className='analysis-list-head'>
              {
                [...Array(COLUMNS_NUM)]?.map(val => (
                  <Flex key={`${data?.moduleName}-${val}`} className='key-cell'>
                    <div className='key-name'>{t('common.key')}</div>
                    <div className='key-value'>{t('common.value')}</div>
                  </Flex>
                ))
              }
            </Flex>
            <div className='analysis-list'>
              {/* 每行x列 COLUMNS_NUM */}
              {
                data?.list?.map((itemGroup, itemGroupIndex) => {
                  return (
                    <Flex key={`${data?.moduleName}-${index}-${itemGroupIndex}`}>
                      {
                        itemGroup?.map(item => (
                          <Flex key={`${item?.key}`} className='key-cell'>
                            <div className='key-name'>{item?.key}</div>
                            <Tooltip title={item?.value}>
                              <div className='key-value'>{item?.value}</div>
                            </Tooltip>
                          </Flex>
                        ))
                      }
                    </Flex>
                  )
                })
              }
            </div>
          </div>
        ))
      }
    </div>
  )
};

export default FileAnalysisContent;
